<template>
  <view class="index-content">
    <u-notice-bar
      mode="horizontal"
      :list="noticelist"
      v-if="!isDisplay"
    ></u-notice-bar>
    <u-swiper
      :list="[backgroundDTO.imgeUrl]"
      mode="dot"
      height="400"
      @click="onClickSwiper"
    ></u-swiper>

    <view v-if="!loading">
      <view class="button" @click="headleBtn" v-if="!isDisplay"
        >一键生成报告</view
      >
      <view class="grid-container" v-if="!isDisplay">
        <u-divider half-width="100%">报告内含以下内容</u-divider>
        <u-grid :col="4" :border="false" @click="headleGrid">
          <u-grid-item
            index="信息匹配"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="coupon" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">信息匹配</view>
          </u-grid-item>
          <u-grid-item
            index="风险命中"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="attach" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">风险命中</view>
          </u-grid-item>
          <u-grid-item
            index="高危筛查"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="scan" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">高危筛查</view>
          </u-grid-item>
          <u-grid-item
            index="申请排查"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="hourglass" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">申请排查</view>
          </u-grid-item>
          <u-grid-item
            index="风险行为"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="warning" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">风险行为</view>
          </u-grid-item>
          <u-grid-item
            index="特殊验证"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="checkmark-circle" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">特殊验证</view>
          </u-grid-item>
          <u-grid-item
            index="失信排查"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="hourglass" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">失信排查</view>
          </u-grid-item>
          <u-grid-item
            index="消费排查"
            :custom-style="{ 'padding-bottom': '0' }"
          >
            <u-icon name="list-dot" color="#007aff" :size="56"></u-icon>
            <view class="grid-text">消费排查</view>
          </u-grid-item>
        </u-grid>
      </view>

      <view>
        <button
          style="
          width: 90%;
          margin: 40rpx auto;
          background-color: #3745eb;
          color: #fff;"
          @click="gotoCalculate"
          v-if="isDisplay"
        >
          房贷计算器
        </button>
      </view>
    </view>
    <view class="button-box" v-if="loading"></view>
    <view class="news-container">
      <u-divider half-width="100%">热门资讯</u-divider>
      <u-cell-group :border="false">
        <u-cell-item
          @click="heandleClickCell(item.articleId)"
          :index="item.articleId"
          v-for="item in news"
          :key="item.articleId"
        >
          <view solt="title">
            <view class="cell-title-content">
              <u-image
                width="150rpx"
                height="100rpx"
                :src="item.pictureUrl"
              ></u-image>
              <view class="title-content">
                <text>{{ item.mainTitle }}</text
                ><br />
                <text>{{ item.subTitle }}</text>
              </view>
            </view>
          </view>
        </u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
import { getArticleList } from "@/api/index";
import { mapState,mapMutations } from "vuex";
export default {
  data() {
    return {
      // 轮播图
      // list: [
      //   {
      //     image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
      //   },
      // ],
      isDisplay: 1,
      loading: true,
      news: [],
      noticelist: [
        "135******67刚获取了报告",
        "135******86刚获取了报告",
        "138******22刚获取了报告",
        "136******00刚获取了报告",
        "136******56刚获取了报告",
        "178******77刚获取了报告",
        "135******06刚获取了报告",
        "135******34刚获取了报告",
        "136******67刚获取了报告",
      ],
    };
  },
  computed: {
    ...mapState("Public", ["isShow", "backgroundDTO", "isLoading"]),
  },
 
  mounted() {
    this.fetchNewSearch();
  },
  updated() {
    this.isDisplay = this.isShow;
    this.loading = this.isLoading;
  },
  methods: {
    ...mapMutations("order", ["setInfoForm"]),
    fetchNewSearch() {
      getArticleList().then((res) => {
        this.news = res.data;
      });
    },
    onClickSwiper(index) {
      if (!this.isShow) {
        uni.navigateTo({
          url: `/pages/index/report3`,
        });
      }
      console.log(index);
    },
    gotoCalculate() {
      uni.navigateTo({
        url: `/pages/calculator/house_loan_calculator`,
      });
    },
    headleBtn() {
      // 清空表单
      this.setInfoForm({});
      this.$isAppTo("/pages/checkCredit/infoForm");
    },
    headleGrid(index) {
      uni.navigateTo({
        url: `/pages/index/report3`,
      });
    },
    heandleClickCell(articleId) {
      uni.navigateTo({
        url: `/pages/index/newsDetails?articleId=${articleId}`,
      });
    },
  },
};
</script>

<style lang="scss">
.index-content {
  background-color: rgb(255, 255, 255);
}
.button {
  margin: 60rpx auto;
  width: 600rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  color: white;
  // background-color: red;
  background-image: linear-gradient(
    to right,
    rgb(245, 132, 7),
    rgb(254, 67, 22)
  );
  border-radius: $uni-border-radius-sc;
  animation: changeShape 0.5s linear alternate infinite;
}

@keyframes changeShape {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.button-box {
  margin: 60rpx auto;
  width: 600rpx;
  height: 90rpx;
}
.grid-container {
  margin: 20rpx 30rpx;

  .grid-text {
    font-size: 22rpx;
    margin-top: 10rpx;
  }
}

.news-container {
  margin: 0 30rpx;
}

.cell-title-content {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

  & .title-content {
    text-align: left;
    white-space: nowrap;
    margin-left: 20rpx;
    line-height: 40rpx;
    & > text {
      font-size: 24rpx;
      color: black;
    }
    & > text:nth-last-child(1) {
      font-size: 22rpx;
      color: #909399;
    }
  }
}
.show-btn {
  position: absolute;
  top: -1000px;
}
</style>
